<template>
  <div class="lists">
    <h2>饿了么</h2>
    <ul class="uls">
      <li
        @click="change(index)"
        v-for="(item, index) in list"
        :key="index"
        :class="{ active: currentIndex == index }"
      >
        {{ item }}
      </li>
    </ul>
    <div class="good" v-show="currentIndex == 0" >
      <div class="noods" v-for="(item, index) in goods" :key="index">
        <h5>{{ item.name }}</h5>
        <span class="statu">{{ item.status }}</span>
        <div class="jian" v-show="index == 0">
          <span class="demo">{{ item.fir }}</span>
          <span class="demo">{{ item.sec }}</span>
          <span class="demo">{{ item.thi }}</span>
        </div>
        <div class="emo">
          <div class="picture">
            <img :src="item.pic" alt="" />
            <img :src="item.pic1" alt="" />
            <img :src="item.pic2" alt="" v-show="index == 1" />
          </div>
          <p>{{ item.money }}</p>
          <span class="total">共{{ item.total }}件</span>
        </div>
        <van-button round type="info" color="#7232dd">再来一单</van-button>
      </div>
    </div>


    <div class="ane" v-show="currentIndex == 1">待消费</div>
    <div class="bne" v-show="currentIndex == 2">待评价</div>
    <div class="cne" v-show="currentIndex == 3">退款</div>
  </div>
</template>

<script>
import one from "../../assets/1.png";
import two from "../../assets/2.jpg";
import three from "../../assets/3.jpg";
import four from "../../assets/4.jpg";
import five from "../../assets/5.jpg";
import six from "../../assets/6.jpg";
import seven from "../../assets/7.png";
export default {
  data() {
    return {
      list: ["全部", "待消费", "待评价", "退款"],
      // list:[{name:'全部',status:false},{name:'待消费',status:false},{name:'待评价',status:false},{name:'退款',status:false}],
      currentIndex: 0,
      goods: [
        {
          name: "纯手工饺子",
          pic: one,
          pic1: two,
          pic2: "",
          status: "已送达",
          money: "￥17.8",
          total: 2,
          fir: "10减3",
          sec: "25减10",
          thi: "50减21",
        },
        {
          name: "唐久便利",
          pic: three,
          pic1: four,
          pic2: five,
          status: "已送达",
          money: "￥18.3",
          total: 3,
        },
        {
          name: "每一水果",
          pic: six,
          pic1: seven,
          pic2: "",
          status: "已送达",
          money: "￥28.7",
          total: 2,
        },
      ],
    };
  },
  methods: {
    change(index) {
      this.currentIndex = index;
    },
  },
};
</script>


<style scoped>
.lists {
  width: 100%;
  /* flex: 1; */
  position: fixed;
  top: 0px;
  height: 625px;
  text-align: left;
  /* background-color: lavender; */
  font-size: 16px;
  /* display: flex; */
  /* flex-direction: column; */
}
h2 {
  height: 40px;
  font-size: 20px;
  text-align: center;
  background-color: #ccc;
}
.uls {
  width: 100%;
  height: 40px;
  /* margin-top: 10px; */
  display: flex;
  background-color: #ccc;
  overflow: hidden;
}
li {
  margin-left: 20px;
}
.active {
  border-bottom: 2px solid blue;
  font-weight: bolder;
}
.good {
  width: 100%;
  height: 550px;
  overflow: auto;
}
.noods {
  width: 100%;
  height: 200px;
  border-bottom: 1px solid #000;
  margin-top: 10px;
  position: relative;
}
h5 {
  font-size: 18px;
  display: inline-block;
}
.statu {
  display: inline-block;
  margin-left: 220px;
  color: gainsboro;
}
.demo {
  border: 1px solid orange;
  margin-right: 10px;
  color: orange;
}
.emo {
  width: 100%;
  height: 50px;
  display: flex;
  position: relative;
}
.picture {
  width: 200px;
  height: 50px;
  display: flex;
}
img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 5px;
}
p {
  margin-left: 100px;
}
.total {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 14px;
  color: #ccc;
}
button {
  position: absolute;
  right: 10px;
  margin-top: 10px;
  width: 100px;
  height: 30px;
  border-radius: 10px;
  text-align: center;
  color: blue;
  border: 1px solid blue;
  /* z-index: -10; */
}
</style>